import {Component, OnInit} from '@angular/core';
import {BaseAlcService} from '@base/directives/base-alc/base-alc.service';
import paletteProvider from './bpmn-tools';


import propertiesPanelModule from 'bpmn-js-properties-panel';
// import propertiesProvider from 'bpmn-js-properties-panel/lib/provider/bpmn';
import BpmnModeler from 'bpmn-js/lib/Modeler.js';
import {HttpClient} from '@angular/common/http';
import {DomSanitizer} from '@angular/platform-browser';
import propertiesProvider from 'bpmn-js-properties-panel/lib/provider/camunda';
import {camunda} from './camunda';
import CustomTranslate from './CustomTranslate';

@Component({
    selector: 'blank',
    templateUrl: './blank.component.html',
    styleUrls: ['./blank.component.scss']
})
export class BlankComponent implements OnInit {
    full = true;
    roleA = '';
    roleB = '';
    public saveHref;
    public saveName = '';
    private modeler: any;
    private readonly newDiagram = 'assets/bpmn/newDiagram.bpmn';

    // private readonly newDiagram = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';

    /**
     * Constructor
     */
    constructor(
        public _baseAlcService: BaseAlcService, private _httpClient: HttpClient, private sanitizer: DomSanitizer
    ) {
    }

    ngOnInit(): void {
        this.initBpmn();
    }

    toggleFull(): void {
        this.full = !this.full;
        this._baseAlcService.setFull(this.full);
        // this.reMenu();
    }

    toggleRoleA(): void {
        this.full = false;
        this.roleA = this.roleA === 'role-a' ? '' : 'role-a';
        this._baseAlcService.setFull(this.full);
        this._baseAlcService.setAbility([this.roleA]);
        // this.reMenu();
    }

    toggleRoleB(): void {
        this.full = false;
        this.roleB = this.roleB === 'role-b' ? '' : 'role-b';
        this._baseAlcService.setFull(this.full);
        this._baseAlcService.setAbility([this.roleB]);
        // this.reMenu();
    }


    initBpmn(): void {
        const customTranslate = {
            translate: ['value', CustomTranslate]
        };
        this.modeler = new BpmnModeler({
            container: '#js-canvas',
            width: '100%',
            height: '100%',
            propertiesPanel: {
                parent: '#js-properties-panel'
            },
            additionalModules: [
                propertiesProvider, // 左侧工具栏
                propertiesPanelModule, // 右侧属性栏
                customTranslate, // 汉化
                paletteProvider // 扩展左侧工具栏
            ],
            moddleExtensions: {
                camunda: camunda
            }

        });
        this.load();
    }

    load(): void {
        const url = '../../../assets/bpmn/newDiagram.bpmn';
        this._httpClient.get(this.newDiagram, {
            headers: {observe: 'response'}, responseType: 'text'
        }).subscribe(
            (x: any) => {
                this.modeler.importXML(x, this.handleError);
            },
            this.handleError
        );
    }

    handleError(err: any): void {
        if (err) {
            console.warn('Ups, error: ', err);
        } else {
            console.log('rendered:');
        }
    }

    save(): void {
        this.modeler.saveXML((err: any, xml: any) => console.log('Result of saving XML: ', err, xml));
    }

// 保存为XML
    saveDiagram(e): void {
        this.modeler.saveXML({format: true}, (err, xml) => {
            if (err) {
                console.error(err);
            } else {
                this.setEncoded(xml, 'bpmn.xml');
            }
        });
        e.preventDefault();
        e.stopPropagation();
    }

// 保存为svg
    saveSVG(e): void {
        this.modeler.saveSVG((err, svg) => {
            if (err) {
                console.error(err);
            } else {
                this.setEncoded(svg, 'bpmn.svg');
            }
        });
        e.preventDefault();
        e.stopPropagation();
    }

    setEncoded(data, name): void {
        const encodedData = encodeURIComponent(data);
        if (data) {
            this.saveHref = this.sanitizer.bypassSecurityTrustResourceUrl('data:application/bpmn20-xml;charset=UTF-8,' + encodedData);
            this.saveName = name;
        }
    }

}
